<template>
	<el-card shadow="hover" :header="loginType == '3'?'欢迎':''" style="height: 100%;">
		<!-- <div class="welcome" v-if="loginType == '3'">
			<div class="logo">
				<img src="img/logo.png">
				<h2>欢迎使用任务看板</h2>
			</div>
			<div class="tips">
				<div class="tips-item">
					<div class="tips-item-icon"><el-icon><el-icon-menu /></el-icon></div>
					<div class="tips-item-message">通过电子化任务卡片，让工作流程更透明，在线化协作更高效。</div>
				</div>
				<div class="tips-item">
					<div class="tips-item-icon"><el-icon><el-icon-promotion /></el-icon></div>
					<div class="tips-item-message">
						任务看板作为提高项目透明度和工作流效率的最简单方法之一，已被广泛应用于人力资源管理、活动管理、销售管理、库存管理等多种涉及跨部门协作的团队管理场景。</div>
				</div>
				<div class="tips-item">
					<div class="tips-item-icon"><el-icon><el-icon-milk-tea /></el-icon></div>
					<div class="tips-item-message">在一个界面实现任务全过程管理，操作更方便。</div>
				</div>
			</div>
			<div class="actions"> -->
		<!--				<el-button type="primary" icon="el-icon-check" size="large" @click="godoc">文档</el-button>-->
		<!-- </div>
	</div> -->
		<div class="welcome">
			<div class="statusClass">
				<Waterfall :list="switchStatusList" :gutter="gutter" :width="cardCount">
					<template #item="{ item }">
						<div class="grid-content">
							<div class="box-card">
								<div class="grid-title">
									<div>
										<img class="user-img" :src="'data:image/png;base64,'+item.photo" alt="">
<!--										<el-avatar-->
<!--											shape="square"-->
<!--											fit="scale-down"-->
<!--											:src="'data:image/png;base64,'+item.photo"/>-->
									</div>
									<div>
										<span>{{ item.cn }}</span>
										<span class="addr_class">{{ item.addr }}</span>
									</div>
									<div class="card-type">
										<el-tag type="warning" size="small" v-if="item.status === '出差'">
											<el-icon class="type-icon">
												<component :is="flight"/>
											</el-icon>
											<span>{{ item.status }}</span>
										</el-tag>
										<el-tag type="danger" size="small" v-if="item.status === '休假'">
											<el-icon class="type-icon">
												<component :is="coconutTree"/>
											</el-icon>
											<span>{{ item.status }}</span>
										</el-tag>
									</div>
									<div class="edit-icon" v-if="loginType === '1' || item.id === logId">
										<el-icon size="13" @click="editBtn(item)" style="cursor: pointer;">
											<el-icon-edit style="color: #409eff;"/>
										</el-icon>
									</div>
								</div>
								<el-row class="desc_row">
									<el-col :span="24" v-for="(item_chilr, index_chilr) in item.descList"
											:key="index_chilr"
											class="status_type">
										<div>
											<span :style="index_chilr % 2 ? 'background:#E99D42': ''"
												  class="desc_round"></span>
											<span>{{ item_chilr.value }}</span>
										</div>
									</el-col>
								</el-row>
							</div>
						</div>
					</template>
				</Waterfall>
			</div>


			<!--			<div class="statusClass" :loading="listLoading">-->
			<!--					&lt;!&ndash; 节点 &ndash;&gt;-->
			<!--					<div class="grid-content" v-for="(item,item_index) in switchStatusList" :key="item.id">-->
			<!--						<div class="box-card">-->
			<!--							<div class="grid-title">-->
			<!--								<div>-->
			<!--									<el-avatar shape="square" src="https://img1.baidu.com/it/u=2265440799,1438655997&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></el-avatar>-->
			<!--								</div>-->
			<!--								<div>-->
			<!--									<span>{{ item.cn }}  {{ item_index }}</span>-->
			<!--									<span class="addr_class">{{ item.addr }}</span>-->
			<!--								</div>-->
			<!--								<div class="card-type">-->
			<!--									<el-tag type="warning" size="small" v-if="item.status === '出差'">-->
			<!--										<el-icon class="type-icon">-->
			<!--											<component :is="coconutTree"/>-->
			<!--										</el-icon>-->
			<!--										<span>{{ item.status }}</span>-->
			<!--									</el-tag>-->
			<!--									<el-tag type="danger" size="small" v-if="item.status === '休假'">-->
			<!--										<el-icon class="type-icon">-->
			<!--											<component :is="flight"/>-->
			<!--										</el-icon>-->
			<!--										<span>{{ item.status }}</span>-->
			<!--									</el-tag>-->
			<!--								</div>-->
			<!--								<div class="edit-icon"  v-if="loginType === '1' || item.id === logId" >-->
			<!--									<el-icon  size="13" @click="editBtn(item)" style="cursor: pointer;"><el-icon-edit style="color: #409eff;" /></el-icon>-->
			<!--								</div>-->
			<!--							</div>-->
			<!--							<el-row class="desc_row">-->
			<!--								<el-col :span="24" v-for="(item_chilr, index_chilr) in item.descList"  :key="index_chilr"-->
			<!--									class="status_type">-->
			<!--									<div>-->
			<!--										<span :style="index_chilr % 2 ? 'background:#E99D42': ''" class="desc_round"></span>-->
			<!--										<span>{{ item_chilr.value }}</span>-->
			<!--									</div>-->
			<!--								</el-col>-->
			<!--							</el-row>-->
			<!--						</div>-->
			<!--					</div>-->
			<!--				</div>-->
		</div>
		<el-dialog :close-on-click-modal="false" :modal-append-to-body="false" title="修改信息"
				   v-model="dialogFormVisible"
				   width="800px" top="8vh">
			<el-form ref="searchForm" :model="searchForm" :rules="rules" label-position="right" label-width="100px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="用户姓名" prop="cn">
							<el-input v-model="searchForm.cn" class="form-item" clearable placeholder="示例：张三"/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="手机号码" prop="mobile">
							<el-input v-model="searchForm.mobile" class="form-item" clearable/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="用户邮箱" prop="email">
							<el-input v-model="searchForm.email" class="form-item" clearable/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="员工职位" prop="levelName">
							<el-select v-model="searchForm.levelName" class="form-item" clearable
									   :disabled="loginType == '2'">
								<el-option v-for="item in positionList" :key="item" :label="item" :value="item"/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="label-center" label="用户角色" prop="roleIdList">
							<el-select v-model="searchForm.roleIdList" class="form-item" :disabled="loginType == '2'"
									   multiple clearable>
								<el-option v-for="item in ajaxArray.roleList" :key="item.id" :label="item.roleName"
										   :value="item.id"/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="所在组织" prop="openTreeBtnData">
							<el-button class="form-item" @click="loginType != '2'?innerVisible = true:''">
								{{ openTreeBtnData }}
							</el-button>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="员工状态">
							<el-select v-model="searchForm.status" class="form-item" clearable>
								<el-option v-for="item in stateList" :key="item" :label="item" :value="item"/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="工作地点" prop="addr">
							<el-select v-model="searchForm.addr" class="form-item" clearable>
								<el-option v-for="item in addrList" :key="item" :label="item" :value="item"/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="24" v-if="searchForm.descList.length > 0">
						<el-form-item label="工作职责" prop="descList"></el-form-item>
					</el-col>
					<el-col :span="24" v-for="(domain, index) in searchForm.descList" :key="index">
						<el-form-item :label="index + 1" :prop="'descList.' + index + '.value'"
									  :rules="{ required: true, message: '工作职责不能为空', trigger: 'blur' }">
							<el-input v-model="domain.value" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }"
									  maxlength="100" resize="none" clearable :readonly="loginType == '2'"></el-input>
							<el-button v-if="loginType != '2'" text @click.prevent="removeDomain(domain)" type="danger">
								删除
							</el-button>
						</el-form-item>
					</el-col>
					<el-col :span="24" v-if="loginType != '2'">
						<el-form-item label="">
							<el-button @click="addDomain">新增职责</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="checkOrg()" :loading="addOrUpdateLoad">确 定</el-button>
				</div>
			</template>
			<!-- 所在组织 -->
			<el-dialog :close-on-click-modal="false" :modal-append-to-body="false" v-model="innerVisible" append-to-body
					   class="dialog dep-dialog" title="请选择组织架构" width="50%" top="8vh">
				<div style="margin-top: 10px; margin-bottom: 10px">
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item :to="{}" @click="router(1, 0)">首页
						</el-breadcrumb-item>
						<el-breadcrumb-item v-for="(item, index) in breadList" :key="item.pId" :to="{}"
											@click="router(item, index)">
							{{ item.orgName }}
						</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<el-table ref="listTree" v-loading="loadingTree" :data="listTree" border fit height="400"
						  highlight-current-row stripe style="width: 100%">
					<el-table-column label="组织" prop="orgName"/>
					<el-table-column fixed="right" label="操作" width="150">
						<template v-slot="{ row }">
							<el-button size="small" style="padding: 0" type="text" @click="TreeFindSuperior(row)">查看下级
							</el-button>
							<el-button size="small" style="padding: 0" type="text" @click="TreeSureBtn(row)">选择该组织
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="; (innerVisible = false), TreeSubmitBtn()">重 置
						</el-button>
					</div>
				</template>
			</el-dialog>
		</el-dialog>
	</el-card>
</template>

<script>
import {Flight, CoconutTree} from '@/assets/icons'
import {Waterfall} from "vue-waterfall-plugin-next";
import "vue-waterfall-plugin-next/dist/style.css";

export default {
	title: "欢迎",
	icon: "el-icon-present",
	description: "项目特色以及文档链接",
	components: {
		Waterfall
	},
	data() {
		const checkPhone = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('请输入手机号'))
			} else {
				const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
				if (reg.test(value)) {
					callback()
				} else {
					return callback(new Error('请输入正确的手机号'))
				}
			}
		}
		const openTreeBtnData = (rule, value, callback) => {
			callback()
		}
		return {
			listLoading: false,
			switchStatusList: [],
			loginType: '',
			logId: '', // 当前登陆人id
			dialogFormVisible: false,
			searchForm: {
				uumId: '',
				cn: '',
				mobile: '',
				email: '',
				empNum: '',
				levelName: '',
				orgNo: '',
				roleIdList: '',
				status: '',
				addr: '',
				descList: []
			},
			rules: {
				uumId: [{required: true, message: '请输入员工OA账号', trigger: 'change'}],
				cn: [{required: true, message: '请输入姓名', trigger: 'blur'}],
				mobile: [{validator: checkPhone, required: true}],
				email: [
					{required: true, message: '请输入邮箱地址', trigger: 'blur'},
					{
						type: 'email',
						message: '请输入正确的邮箱地址',
						trigger: ['blur', 'change']
					}
				],
				empNum: [{required: true, message: '请输入员工编号', trigger: 'blur'}],
				levelName: [{required: true, message: '请输入员工职位', trigger: 'blur'}],
				orgNo: [{validator: openTreeBtnData, required: true}],
				roleIdList: [{required: true, message: '请选择角色', trigger: 'blur'}],
				descList: [{required: true}],
				addr: [{required: true, message: '请选择工作地点', trigger: 'blur'}],
			},
			ajaxArray: {
				role: {
					roleId: '',
					roleName: ''
				}
			},
			positionList: [
				'省公司领导（正）',
				'省公司领导（副）',
				'省公司部门领导（正）',
				'省公司部门领导（副）',
				'省公司三级经理',
				'省公司中心领导（正）',
				'省公司中心领导（副）',
				'省公司部门助理',
				'省公司员工',
				'地市领导（正）',
				'地市领导（副）',
				'地市部门领导（正）',
				'地市部门领导（副）',
				'地市中心领导（正）',
				'地市中心领导（副）',
				'地市部门助理',
				'地市员工',
				'区县领导（正）',
				'区县领导（副）',
				'区县员工',
				'公共用户'
			],
			openTreeBtnData: '请选择组织',
			stateList: ['休假', '出差'],
			addrList: ['省公司', '趵突泉园区', '德亨大厦'],
			addOrUpdateLoad: false,
			listTree: [],
			innerVisible: false, // 选择组织弹窗
			formTree: {
				companyId: '',
				orgNo: this.$TOOL.data.get('USER_INFO').companyId,
				id: '',
				levelNum: 1,
				levelName: ''
			},
			orgListQuery: {
				size: 10,
				page: 1,
				total: 0
			},
			breadList: [],
			coconutTree: CoconutTree,
			flight: Flight,
			cardCount: 350,
			gutter: 22
		}
	},
	watch: {
		dialogFormVisible: {
			handler(newVal) {
				if (newVal === false) {
					this.$refs.searchForm.resetFields()
				}
			},
			deep: true
		}
	},
	mounted() {
		this.countCardWidth()
		window.addEventListener('resize', this.handleResize)
	},
	created() {
		this.loginType = JSON.parse(localStorage.getItem('USER_INFO')).content.roleType;
		this.logId = JSON.parse(localStorage.getItem('USER_INFO')).content.id;
		this.getData();
		this.getCompanyData();
		this.getTreeList();
	},
	methods: {
		handleResize() {
			this.countCardWidth()
		},
		countCardWidth() {
			console.log(document.getElementsByClassName('waterfall-list')[0].clientWidth)
			this.cardCount = (document.getElementsByClassName('waterfall-list')[0].clientWidth - 8 - this.gutter * 5) / 4
			// this.cardCount = this.cardCount > 350 || 350
		},
		godoc() {
			window.open("https://lolicode.gitee.io/scui-doc/")
		},
		getTooltipContent(descList) {
			return descList.map(item => item.value).join('\n');
		},
		editBtn(row) {
			this.dialogFormVisible = true;
			this.searchForm = JSON.parse(JSON.stringify(row));
			this.openTreeBtnData = this.searchForm.orgName
		},
		async getData() {
			this.listLoading = true
			await this.$API.auth.queryAllUser.get().then(res => {
				if (res.code == 200) {
					this.switchStatusList = res.data;
					this.switchStatusList.forEach(item => {
						item.descList.forEach(v => {
							v.valueLength = v.value.length;
						})
					})
				}
				this.listLoading = false;
			})
		},
		async getCompanyData() {
			// 获取角色
			const data = await this.$API.role.notPageList.get()
			this.ajaxArray.roleList = data.data
		},
		addDomain() {
			this.searchForm.descList.push({
				value: '',
			});
		},
		removeDomain(item) {
			var index = this.searchForm.descList.indexOf(item)
			if (index !== -1) {
				this.searchForm.descList.splice(index, 1)
			}
		},
		checkOrg() {
			if (
				(this.openTreeBtnData === '请选择组织' || this.openTreeBtnData === '')
			) {
				this.$message.error('请选择组织')
			} else {
				this.submitForm()
			}
		},
		// 确定提交表单
		async submitForm() {
			this.$refs.searchForm.validate(async valid => {
				if (valid) {
					this.addOrUpdateLoad = true;
					let lists = await this.$API.uum.staffEdit.post(this.searchForm);
					if (lists.code !== 200) {
						this.addOrUpdateLoad = false;
						return
					}
					this.$message.success('修改成功！');
					this.getData();
					this.dialogFormVisible = false;
					this.addOrUpdateLoad = false;
				} else {
					return false
				}
			})
		},
		router(e, index) {
			if (e === 1) {
				this.formTree.levelNum = 1
				this.formTree.pId = this.$store.getters.companyId
				this.breadList = []
				this.pId = ''
			} else {
				this.formTree = e
				this.pId = e.pId
				this.breadList = this.breadList.splice(0, index + 1)
			}
			this.getTreeList()
		},
		async getTreeList() {
			const params = {
				parentNo: this.formTree.orgNo,
				...this.orgListQuery
			}
			const lists = await this.$API.uum.list.get(params)
			this.listTree = lists.data.records
			this.orgListQuery.total = lists.data.total
		},
		TreeFindSuperior(val) {
			if (val != null) {
				this.formTree = val
				this.formTree.pId = this.formTree.id
				this.breadList.length === 0
					? (this.formTree.levelNum = 2)
					: (this.formTree.levelNum = this.breadList.length + 1)
				this.pId = val.id
				this.breadList.push(val)
				delete this.formTree.id
				this.getTreeList()
			}
		},
		TreeSureBtn(val) {
			this.openTreeBtnData = val.orgName
			this.searchForm.orgNo = val.orgNo
			this.breadList.length === 0
				? (this.searchForm.orgLevel = 1)
				: (this.searchForm.orgLevel = this.breadList.length + 1)
			this.innerVisible = false
		},
		TreeSubmitBtn() {
			this.searchForm.orgId = ''
			this.searchForm.orgLevel = ''
			this.openTreeBtnData = '请选择组织'
			this.breadList = []
			this.innerVisible = false
		}
	},
	beforeDestroy() {
		window.removeEventListener('resize', this.handleResize);
	}
}
</script>

<style scoped>
.welcome {
	height: 100vh;
	overflow: auto;
	padding-bottom: 50px;
}

.welcome .logo {
	text-align: center;
}

.welcome .logo img {
	vertical-align: bottom;
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
}

.welcome .logo h2 {
	font-size: 30px;
	font-weight: normal;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tips {
	margin-top: 20px;
	padding: 0 40px;
}

.tips-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 7.5px 0;
}

.tips-item-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 18px;
	margin-right: 20px;
	color: var(--el-color-primary);
	background: rgba(180, 180, 180, 0.1);
}

.tips-item-message {
	flex: 1;
	font-size: 14px;
}

.statusClass {
	width: 100%;
	/* height: auto;
	min-height: auto;
	max-height: 80%; */
	overflow: auto;
	//column-count: v-bind('cardCount');
	//column-gap: 22px;
	//break-after: avoid;
	height: 100%;
	//padding: 26px;
}

::v-deep .el-card__body {
	padding: 0 !important;
}

::v-deep .el-card {
	margin: 0 !important;
}

.tooltip-content {
	display: flex;
	align-items: center;
}

.grid-content {
	font-size: 14px;
	background: #fff;
	border-radius: 3px;
	//margin-bottom: 22px;

	.box-card {
		border-radius: 16px;
		border: 1px solid #d3d6dd;
		padding: 16px;
		height: 100%;
		overflow: hidden;
		//box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

		&:hover {
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
			border-color: #fff;
		}

		.card-type {
			position: relative;
			top: 2px;
		}
	}

	.el-avatar--square {
		border-radius: 16px;
	}

	.grid-title {
		width: 100%;
		display: flex;
		padding-bottom: 16px;
		align-items: center;
		position: relative;

		> div:nth-child(2) {
			margin: 10px;
			font-weight: 600;
			font-size: 16px;

		}
	}

	.addr_class {
		font-size: 12px;
		color: #8f8f8f;
		margin-left: 10px;
		font-weight: normal;
	}

	.desc_row {
		white-space: pre-wrap;
		//height: calc(4 * 24px);
		//display: -webkit-box;
		//-webkit-line-clamp: 4;
		//-webkit-box-orient: vertical;
		//overflow: hidden;
	}

	/* ::v-deep .el-col {
		max-width: 100% !important;
	} */

	.status_type {
		line-height: 24px;
		margin: 0 5px 6px;
	}
}

.popsver_bj {
	width: 100%;
	background: #696969;
	color: #fff;
	/* font-size: 12px; */
	padding: 10px;
	border-radius: 8px;
}


.desc_round {
	display: inline-block;
	margin-right: 10px;
	background: #969697;
	padding: 6px 2px;
	border-radius: 10px;
}

::v-deep .el-tooltip__popper {
	white-space: pre-wrap;
}

.actions {
	text-align: center;
	margin: 40px 0 20px 0;
}

.edit-icon {
	position: absolute;
	right: 0;
	background: #F0F6FD;
	border-radius: 3px;
	border: 1px solid #3894FF;
	padding: 0px 3px;
}

.type-icon {
	width: 14px;
	height: 14px;
}

.user-img {
	height: 40px;
	width: 40px;
	border-radius: 16px;
	border: 1px solid #cccccc;
}
</style>
<style scoped>
.form-item {
	width: 70%;
}

::v-deep .el-form-item__content {
	display: flex;

	.el-textarea {
		width: 90%;
	}
}

.el-popper.is-light {
	padding: 0 !important;
}
</style>
